﻿<!DOCTYPE HTML>
<html>
    <body style="display: none">
        <div>

            <!-- Placeholders for name and decaf properties -->
            <h1 id="msghdr">
                <span id="name"></span>, your <span id="decaf"></span>
                coffee is ready.
            </h1>

            <!-- Placeholder for edit mode message -->
            <h1 id="editmodehdr" style="display:none">
                The app part is in edit mode.
            </h1>

        
            <!-- Placeholder for image -->
            <img id="size" src="#"/><br />

            <!-- Placeholder for teaspoons property -->
            <span id="sweet"></span>

            <div id="partSize">
            Click on the desired width of the app part:
            <select id="partWidth" onchange="partWidthChanged()">
                <option value="300">300 px</option>
                <option value="480" selected>480 px</option>
                <option value="660">660 px</option>
            </select>
            </div>
        </div>

    <script 
        type="text/javascript" 
        src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js">
    </script>
    <script 
        type="text/javascript" 
        src="Scripts/Common.js">
    </script>
    <!-- Main JavaScript function, controls the rendering
         logic based on the custom property values -->
    <script 
        type="text/javascript" 
        src="Scripts/Coffeemaker.js">
    </script>
    <!-- Script to load the style sheet from 
         the app web -->
    <script 
        type="text/javascript" 
        src="Scripts/StyleLoader.js">
    </script>
	</body>
</html>